<!DOCTYPE html>

<!-- Copyright © SixtyFPS GmbH <info@slint.dev> -->
<!-- SPDX-License-Identifier: MIT -->

<html>
<!--
    This is a static html file used to display the wasm build.
    In order to generate the build
     - uncomment the #wasm# lines in Cargo.toml
     - Run in this directory:
         SLINT_STYLE=fluent wasm-pack build --release --out-dir pkg/fluent --target web
         SLINT_STYLE=material wasm-pack build --release --out-dir pkg/material --target web
         SLINT_STYLE=cupertino wasm-pack build --release --out-dir pkg/cupertino --target web
         SLINT_STYLE=cosmic wasm-pack build --release --out-dir pkg/cosmic --target web
  -->

<head>
  <meta charset="UTF-8">
  <title>Slint Widget Gallery Demo (Web Assembly version)</title>
  <link rel="stylesheet" href="https://slint.dev/css/demos-v1.css">
</head>

<body>
  <h1>Slint Gallery</h1>
  <p>This is the <a href="https://slint.dev">Slint</a> UI Widget Gallery Demo compiled to WebAssembly. It
    demonstrates
    different re-usable graphical
    elements.</p>

  <div id="spinner" style="position: relative;">
    <div class="spinner">Loading...</div>
  </div>
  <p>Select style
    <select id="style-selection">
      <option value="fluent">Fluent</option>
      <option value="material">Material</option>
      <option value="cupertino">Cupertino</option>
      <option value="cosmic">Cosmic</option>
    </select>
  </p>
  <div id="canvas-parent"></div>
  <p class="links">
    <a href="https://github.com/slint-ui/slint/blob/master/examples/gallery/gallery.slint">
      View Source Code on GitHub</a> -
    <a href="https://slint.dev/editor?load_demo=examples/gallery/gallery.slint">
      Open in SlintPad
    </a>
  </p>
  <script type="module">
    var galleries = [];
    var currentGallery = undefined;

    function initGallery(gallery) {
      document.getElementById("spinner").hidden = false;

      if (currentGallery !== undefined) {
        let currentGalleryCanvas = document.getElementById("canvas");

        // remove old canvas and unload window
        if (currentGalleryCanvas != undefined) {
          document.getElementById("canvas-parent").removeChild(currentGalleryCanvas);
        }
      }

      if (galleries[gallery] !== undefined) {
        document.getElementById("canvas-parent").appendChild(galleries[gallery]);
        document.getElementById("spinner").hidden = true;
      } else {
        import(gallery).then(module => {
          let canvas = document.createElement("canvas");
          canvas.id = "canvas";
          canvas.dataset.slintAutoResizeToPreferred = "true";
          currentGallery = gallery;
          galleries[gallery] = canvas;

          document.getElementById("canvas-parent").appendChild(canvas);
          module.default().finally(() => {
            document.getElementById("canvas").hidden = false;
            document.getElementById("spinner").hidden = true;
          });
        })
      }
    }

    var styleSelection = document.getElementById("style-selection");

    function loadGallery() {
      var selectedStyle = ".\/pkg\/" + styleSelection[styleSelection.selectedIndex].value + "\/gallery.js";
      initGallery(selectedStyle);
    }

    styleSelection.onchange = loadGallery;

    window.addEventListener('load', () => {
      const urlParams = new URLSearchParams(window.location.search);
      const style = urlParams.get('style');
      if (style) {
        document.getElementById('style-selection').value = style.split(',')[0];
      } else {
        const userAgent = window.navigator.userAgent.toLowerCase();
        let defaultStyle = '';
        if (userAgent.indexOf('mac') !== -1 || userAgent.indexOf('iphone') !== -1 || userAgent.indexOf('ipad') !== -1) {
          defaultStyle = 'cupertino';
        } else if (userAgent.indexOf('windows') !== -1) {
          defaultStyle = 'fluent';
        } else if (userAgent.indexOf('android') !== -1) {
          defaultStyle = 'material';
        }
        if (defaultStyle) {
          document.getElementById('style-selection').value = defaultStyle;
        }
      }
      loadGallery();
    }, false);
  </script>
</body>

</html>
